<template>
    <view class="select_fyname_input_cp">
        <u-input 
            v-model="mydata" 
            placeholder="请选择费用名称"/>
        <u-icon 
            name="arrow-down-fill"
            @click="show = true">
        </u-icon>
        <u-select 
            v-model="show" 
            :list="mydataList" 
            @confirm="confirm">
        </u-select>
    </view>
</template>

<script>
//费用名称选择input组件
export default {
    name:"SelectFynameInputCp",
    props:{
        value:{
            type:String,
            default:'',
        },
    },
    data() {
        return {
            show: false,
            mydataList: [
                {
                    value: '1',
                    label: '中药费'
                },
                {
                    value: '2',
                    label: '西药费',
                }
            ],
        }
    },
    computed:{
        mydata:{ //费用名称
            get(){
                return this.value;
            },
            set(value){
                this.$emit('input',value);
            },
        },
    },
    methods:{
        confirm(e) { //确定按钮点击事件
            this.mydata = e[0].label;
        }
    },
}
</script>

<style lang="scss" scoped>
.select_fyname_input_cp {
    text-align: center;
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    /deep/.u-input{
        width: 100%;
        margin-right: 35rpx;
    }
    .u-select{
        position: absolute;
    }
}
</style>
